<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>17_Canvas-绘制秒针</title>
    <style>
      body{
        margin: 0;
        padding: 0;
        background-image: url(../../images/grid.png);
      }
      canvas{
        background-color: rgba(255, 0, 0, 0.1);
      }
    </style>
    </head>
    <body>
    
    <canvas id="tutorial" width="300" height="300px">
      你的浏览器不兼容Canvas,请升级您的浏览器!
    </canvas>
    <script>
      window.onload = function(){
        // 1. 获取canvas元素
        var canvas = document.getElementById('tutorial');
        // 2. 获取绘图上下文
        var ctx = canvas.getContext('2d');
    
        let count = 0
        // ctx.translate(150, 150)
        draw()

        setInterval(() => {
          draw()
        }, 1000)

        function draw() {
          count++
          if (count > 60) {
            count = 0
          }
          console.log(count);
          ctx.clearRect(0, 0, 300, 300)
          ctx.save()
          
          ctx.translate(100, 100)
          // Math.PI * 2   一个圆
          // Math.PI * 2 / 60   一个圆分成 60
          ctx.rotate(Math.PI * 2 / 60 * count)
          ctx.lineWidth = 6
          ctx.lineCap = 'round' // 线条末端样式
          ctx.strokeStyle = '#000'

          ctx.beginPath()
          ctx.moveTo(0, 0)
          ctx.lineTo(0, -80)
          ctx.stroke()

          ctx.restore()
        }

      }
    </script>
  
  
</body>
</html>